<template>
	<view class="container">
		<view class="back-btn yticon icon-zuojiantou-up text-white" @click="navBack"></view>
		<!-- 设置白色背景防止软键盘把下部绝对定位元素顶上来盖住输入框等 -->
		<view class="wrapper">
			<view class="logoContent flex align-center justify-center">
				<view class="logoBox flex align-center justify-center">
					<image src="../../static/logo.png"></image>
				</view>
			</view> 
			<view class="flex justify-center margin-tb">
				<image src="../../static/logotext.png" style="width: 544upx;" mode="widthFix"></image>
			</view>	
			<view v-if="loginType=='0'" style="margin-top:216upx;">
				<button class="loginBtn margin-top" @click="WingetUser">注册/登录</button>
				<!-- <button class="loginBtn red margin-top" style="margin-top: 60upx;" @click="changeType('2')">手机号登录</button> -->
			</view>
			
			<view v-if="loginType=='1'" style="margin-top:216upx;">
				<button class="loginBtn margin-top flex justify-center align-center" @getphonenumber="toLogin" open-type="getPhoneNumber">
					<image src="../../static/wx_white.png" mode="widthFix" style="width:50upx;" class="margin-right-xs"></image>
					微信登录
				</button>
			</view>
		</view>
		<!-- <view class="xyTxt">点击登录即代表您同意<text class="text-blue">《注册协议》</text></view> -->
		<view class="cu-load load-modal" v-if="logining">

			<view class="gray-text">正在登录中...</view>
		</view>
	</view>
</template>

<script>
	import {
		mapMutations,
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				mobile: '',
				password: '',
				logining: false,
				loginType:0,
				smscode: '',
				buttonValue: '',
				countdown: 60,
				isSend: true,
				userInfo:{},
				shareid:"",
				sessionId:"",
				phoneNumber:"",
				countryCode:""
			}
		},
		computed: {
			...mapState(['indexInfo'])
		},
		onLoad() {
			// this.beforeLogin();
		},
		onShow: function() {
			let token = this.$ComFunJS.getStorage('shareid');
			token.then((res) => {
				if (res) {
					this.shareid = res;
				}
			})
			uni.removeStorage({
					key: 'sessionid',
					success: function(res) {}
				});
		},
		methods: {
			...mapMutations(['login']),
			inputChange(e) {
				const key = e.currentTarget.dataset.key;
				this[key] = e.detail.value;
			},
			navBack() {
				uni.navigateBack();
			},
			changeType(t) {
				// uni.navigateTo({
				// 	url:"/pages/public/phone"
				// })
				this.loginType = t;
			},
			beforeLogin(e,type) {
				let _this = this;
				uni.login({
					provider: 'weixin',
					success: function(loginRes) {
						_this.logining = true
						_this.$ComFunJS.ajax({
							url: '/rest/api/login',
							method: 'get',
							data: {
								"code": loginRes.code
							},
							success: (res) => {
								console.log(res)
								_this.logining = false;
								if (res.data.userInfo.phoneNumber) {
									_this.login(res.data.sessionId);
									uni.navigateBack();
								}
								if (res.data.sessionId) {
									let sessionid = res.data.sessionId;
									_this.sessionId = sessionid;
									uni.setStorage({
										key: 'sessionid',
										data: res.data.sessionId,
										success: function() {
											type==1?_this.toLogin(e):type==2?_this.toLogin2(e):_this.loginType = 1;
										}
									});
								}
							}
						})
					}
				})	
			},
			async toLogin(e) {
				let _this = this;
				if (e.detail.errMsg == 'getPhoneNumber:fail user deny'||e.detail.errMsg=='getPhoneNumber:fail:user deny') {
					_this.$api.msg('请点击同意，或者使用别的登录方式');
					return
				} else {
					var sessionid = uni.getStorageSync("sessionid")
					if (!sessionid) {
						// _this.$api.msg("登录过期，请重试");
						_this.beforeLogin(e,1)
						return
					}
					uni.checkSession({
						success: function() {
							_this.$ComFunJS.ajax({
								url: '/rest/api/register',
								method: 'post',
								data: {
									"sessionId": _this.sessionId,
									"code": e.detail.code,
									..._this.userInfo
								},
								success: (res) => {
									if (res.data.code==0) {
										uni.removeStorage({
												key: 'sessionid',
												success: function(res) {}
										});
										_this.login(_this.sessionId);
										uni.navigateBack({
											delta: 1
										});
									} else {
										_this.$api.msg(res.data.msg);
										_this.logining = false;
									}
								}
							})
						},
						fail: function() {
							_this.$api.msg("登录过期，请重试");
							_this.beforeLogin()
						}
					})
				}
			},
			WingetUser(e){
				let _this = this;
				uni.getUserProfile({
				  desc: '同步微信信息',
				  success: function (info) {
					if(info.errMsg=="getUserProfile:ok"){
						let label = {
							nickName:info.userInfo.nickName,
							avatar:info.userInfo.avatarUrl,
							province:info.userInfo.province,
							city:info.userInfo.city
						}
						_this.userInfo = {...label};
						_this.beforeLogin(e,3)
						
					}
				  },
				  complete:function(e){
					  console.log(e)
				  }
				});	
			}
		},

	}
</script>

<style lang='scss'>
	page {
		background: #FFFFFF;
	}
	.modeImg{
		width: 100%;
		position: absolute;
		z-index: 1;
		top: 0;
	}
	.container {
		padding-top:120upx;
		position: relative;
		width: 100vw;
		height: 100vh;
		overflow: hidden;
	}

	.wrapper {
		position: relative;
		z-index: 90;
		top: 60upx;
		padding-bottom: 40upx;
	}

	.back-btn {
		position: absolute;
		left: 40upx;
		z-index: 9999;
		padding-top: var(--status-bar-height);
		top: 40upx;
		font-size: 40upx;
		color:#FFFFFF;
	}

	.left-top-sign {
		font-size: 120upx;
		color: $page-color-base;
		position: relative;
		left: -16upx;
	}

	.right-top-sign {
		position: absolute;
		top: 80upx;
		right: -30upx;
		z-index: 95;

		&:before,
		&:after {
			display: block;
			content: "";
			width: 400upx;
			height: 80upx;
			background: #b4f3e2;
		}

		&:before {
			transform: rotate(50deg);
			border-radius: 0 50px 0 0;
		}

		&:after {
			position: absolute;
			right: -198upx;
			top: 0;
			transform: rotate(-50deg);
			border-radius: 50px 0 0 0;
			/* background: pink; */
		}
	}

	.left-bottom-sign {
		position: absolute;
		left: -270upx;
		bottom: -320upx;
		border: 100upx solid #d0d1fd;
		border-radius: 50%;
		padding: 180upx;
	}

	.welcome {
		position: relative;
		text-align: center;
		font-size: 46upx;
		color: #555;
		text-shadow: 1px 0px 1px rgba(0, 0, 0, .3);

		image {
			width: 300upx;
		}
	}

	.input-content {
		width: 556upx;
		padding-top: 40upx;
		margin: 0 auto;
	}

	.input-item {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30upx;
		border-bottom:2upx solid #F0F0F0;
		height: 90upx;
		border-radius: 4px;
		margin-bottom: 20upx;
		bor
		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm+2upx;
			color: $font-color-base;
		}

		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
		}
	}

	.yanBtn {
		font-size: 26upx;
		padding:0 20upx;
		height: 60upx;
		line-height: 60upx;
		background: #FFFFFF;
		border: 1px solid #0163FF;
		font-size: 28upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #0163FF;
		border-radius: 30upx;
		font-family: SourceHanSansCN;
	}
	.phoneLogin{
		text-align: center;
		font-size: 28upx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #9F9F9F;
		margin-top: 105upx;
		background: none;
		border: none;
		height: auto;
		&::after{
			display: none;
		}
		
	}
	.confirm-btn {
		width: 630upx;
		height: 76upx;
		line-height: 76upx;
		border-radius: 50px;
		margin-top: 70upx;
		background: $uni-color-primary;
		color: #fff;
		font-size: $font-lg;

		&:after {
			border-radius: 100px;
		}

	}
	.xyTxt{
		font-size: 24upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #A8A8A8;
		position: absolute;
		text-align: center;
		bottom: 45upx;
		width: 100%;
		left: 0;
	}
	.bg-green {
		background: #39b54a;
		color: #ffffff;
	}

	.forget-section {
		font-size: $font-sm+2upx;
		color: $font-color-spec;
		text-align: center;
		margin-top: 40upx;
	}
	.logoContent{
		.logoBox{
			width: 220upx;
			height: 220upx;
			border-radius: 20upx;
			image{
				width: 210upx;
				height: 210upx;
			}
		}
	}
	.loginBtn{
		width: 556upx;
		height: 100upx;
		background: linear-gradient(90deg, #0163FF 0%, #16ABFF 100%);
		box-shadow: 0px 6upx 11upx 2upx rgba(1, 99, 255, 0.15);
		border-radius: 50upx;
		font-size: 32upx;
		color: #FFFFFF;
		line-height: 100upx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		&.red{
			background: linear-gradient(180deg, #FF927C 0%, #FE4A4A 100%);
			box-shadow: 0px 14upx 22upx 2upx rgba(255, 156, 141, 0.42);
			border-radius: 40upx;
		}
		&.border{
			box-sizing: border-box;
			border: 2upx solid #F84A57;
			border-radius: 40upx;
			background: none;
			color: #F84A57;
			box-shadow:none
		}
	}
	.aboustext{
		font-size: 39upx;
		font-family: SourceHanSansCN;
		font-weight: 400;
		color: #FFFFFA;
		line-height: 39px;
		position: absolute;
		top: 20upx;
		letter-spacing:50upx;
		opacity: 0.6;
		text-shadow: 0px 4upx 13px #DC6235;
		width: 100%;
		text-align: center;
		z-index: 9;
	}
	.register-section {
		position: absolute;
		left: 0;
		bottom: 50upx;
		width: 100%;
		font-size: $font-sm+2upx;
		color: $font-color-base;
		text-align: center;

		text {
			color: $font-color-spec;
			margin-left: 10upx;
		}
	}
</style>
